.navbar
  .navbar-inner
    .left.sliding
      a(href="index.html").back.link
        i.icon.icon-back
        span Back
    .center.sliding Accordion
    .right
      a(href="#").open-panel.link.icon-only
        i.icon.icon-bars
.pages.navbar-through
  .page(data-page="accordion")
    .page-content
      .content-block-title List View Accordion
      .list-block.accordion-list
        ul
          li.accordion-item
            a(href="#").item-link.item-content
              .item-inner 
                .item-title Lorem Ipsum
            .accordion-item-content
              .content-block
                p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean elementum id neque nec commodo. Sed vel justo at turpis laoreet pellentesque quis sed lorem. Integer semper arcu nibh, non mollis arcu tempor vel. Sed pharetra tortor vitae est rhoncus, vel congue dui sollicitudin. Donec eu arcu dignissim felis viverra blandit suscipit eget ipsum.
          li.accordion-item
            a(href="#").item-link.item-content
              .item-inner 
                .item-title Nested List
            .accordion-item-content
              .list-block
                ul
                  li
                    .item-content
                      .item-media
                        i.icon.icon-f7
                      .item-inner 
                        .item-title Item 1
                  li
                    .item-content
                      .item-media
                        i.icon.icon-f7
                      .item-inner 
                        .item-title Item 2
                  li
                    .item-content
                      .item-media
                        i.icon.icon-f7
                      .item-inner 
                        .item-title Item 3
                  li
                    .item-content
                      .item-media
                        i.icon.icon-f7
                      .item-inner 
                        .item-title Item 4
          li.accordion-item
            a(href="#").item-link.item-content
              .item-inner 
                .item-title Integer semper
            .accordion-item-content
              .content-block
                p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean elementum id neque nec commodo. Sed vel justo at turpis laoreet pellentesque quis sed lorem. Integer semper arcu nibh, non mollis arcu tempor vel. Sed pharetra tortor vitae est rhoncus, vel congue dui sollicitudin. Donec eu arcu dignissim felis viverra blandit suscipit eget ipsum.
      .content-block-title Inset Accordion
      .list-block.accordion-list.inset
        ul
          li.accordion-item
            a(href="#").item-link.item-content
              .item-inner 
                .item-title Lorem Ipsum
            .accordion-item-content
              .content-block
                p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean elementum id neque nec commodo. Sed vel justo at turpis laoreet pellentesque quis sed lorem. Integer semper arcu nibh, non mollis arcu tempor vel. Sed pharetra tortor vitae est rhoncus, vel congue dui sollicitudin. Donec eu arcu dignissim felis viverra blandit suscipit eget ipsum.
          li.accordion-item
            a(href="#").item-link.item-content
              .item-inner 
                .item-title Nested List
            .accordion-item-content
              .list-block
                ul
                  li
                    .item-content
                      .item-media
                        i.icon.icon-f7
                      .item-inner 
                        .item-title Item 1
                  li
                    .item-content
                      .item-media
                        i.icon.icon-f7
                      .item-inner 
                        .item-title Item 2
                  li
                    .item-content
                      .item-media
                        i.icon.icon-f7
                      .item-inner 
                        .item-title Item 3
                  li
                    .item-content
                      .item-media
                        i.icon.icon-f7
                      .item-inner 
                        .item-title Item 4
          li.accordion-item
            a(href="#").item-link.item-content
              .item-inner 
                .item-title Integer semper
            .accordion-item-content
              .content-block
                p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean elementum id neque nec commodo. Sed vel justo at turpis laoreet pellentesque quis sed lorem. Integer semper arcu nibh, non mollis arcu tempor vel. Sed pharetra tortor vitae est rhoncus, vel congue dui sollicitudin. Donec eu arcu dignissim felis viverra blandit suscipit eget ipsum.
      .content-block-title Custom Styled Accordion
      .content-block.accordion-list.custom-accordion
        .accordion-item
          .accordion-item-toggle
            i.icon.icon-ks-plus +
            i.icon.icon-ks-minus -
            span Item 1
          .accordion-item-content
            p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean elementum id neque nec commodo. Sed vel justo at turpis laoreet pellentesque quis sed lorem. Integer semper arcu nibh, non mollis arcu tempor vel. Sed pharetra tortor vitae est rhoncus, vel congue dui sollicitudin. Donec eu arcu dignissim felis viverra blandit suscipit eget ipsum.
        .accordion-item
          .accordion-item-toggle
            i.icon.icon-ks-plus +
            i.icon.icon-ks-minus -
            span Item 2
          .accordion-item-content
            p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean elementum id neque nec commodo. Sed vel justo at turpis laoreet pellentesque quis sed lorem. Integer semper arcu nibh, non mollis arcu tempor vel. Sed pharetra tortor vitae est rhoncus, vel congue dui sollicitudin. Donec eu arcu dignissim felis viverra blandit suscipit eget ipsum.
        .accordion-item
          .accordion-item-toggle
            i.icon.icon-ks-plus +
            i.icon.icon-ks-minus -
            span Item 3
          .accordion-item-content
            p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean elementum id neque nec commodo. Sed vel justo at turpis laoreet pellentesque quis sed lorem. Integer semper arcu nibh, non mollis arcu tempor vel. Sed pharetra tortor vitae est rhoncus, vel congue dui sollicitudin. Donec eu arcu dignissim felis viverra blandit suscipit eget ipsum.
      